<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盗天明月(Night)</title>
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-app-capable" content="yes">
    <meta name="apple-mobile-app-status-bar-style" content="black">
   
    <meta name="description" content="一个热爱动漫的大男孩">
    <meta name="keywords" content="喜欢网络游戏">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="cononico">
    <meta name="application-name" content="Cononico" >

    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" type="text/css" href="process.css">
    <link rel="shortcut icon"  type="x-icon" href="favicon.ico" />
    
    <script type="text/javascript">
        //设定rem值
        document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20 + 'px';
    </script>
</head>
<body>
	<header class="head">
        <div class="head_logo_div">
            <img class="logo_img" src="head.jpg"></a>
        </div>
        <div class="head_nav_div">
             <nav class="head_nav">
                <ul id="nav_ul">
                    <li class="nav_li_on nav_ul_li">Home</li>
                    <li class="nav_ul_li">Skill</li>
                    <li class="nav_ul_li">Experience</li>
                    <li class="nav_ul_li">Hobby</li>
                    <li class="nav_ul_li">Contact</li>
                </ul>
            </nav>
        </div>
        <div class="clear"></div>
    </header>
    
    <ul class="float_btn" id="float_btn">
        <li class="btn_on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <div class="wrapBox" id="wrapBox">
        <div class="box">
            <img class="box_bg" src="113.jpg">
            <div class="box01_content">
                <div class="head_div">
                    <div class="cycle_item">
                        <a  class="github_a" id="github_a" target="_blank">
                            <span class="github_icon"></span>
                            <span class="github_text"><p class="item_name">GitHub</p></span>
                        </a>
                        <a  class="weibo_a" id="weibo_a" target="_blank">
                            <span class="weibo_icon"></span>
                            <span class="weibo_text"><p class="item_name">微博</p> </span>
                        </a>
                        <a  class="blog_a" id="blog_a" target="_blank">
                            <span class="blog_icon"></span>
                            <span class="blog_text"><p class="item_name"> 博客</p></span>
                        </a>

                        <div class="green_cycle">
                            <img class="green_cycle_img" src="green_cycle.svg">
                            <div class="yellow_cycle">
                                <img class="yellow_cycle_img" src="yellow_cycle.svg">
                                <div class="blue_cycle">
                                    <img class="blue_cycle_img" src="blue_cycle.svg">
                                    <div class="head_img_div">
                                        <img class="head_img" src="117.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="title">远行</h1>
                <h2 class="title_h2">坚持梦想，乘风远行！</h2>
                <div id="box01_text">
                <p class="box01_p">一直都生活在梦中.</p>
                <p class="box01_p">做着一个醒不来的美梦.</p>
                <p class="box01_p">不久后我将沉沦其中.</p>
                </div>
            </div>
            <div class="arrow_div">
                <img class="arrow_img" src="arrowhead.png">
            </div>
        </div>
        
        <div class="box">
            <img class="box_bg" src="110.jpg">
            
            <div class="box02_content box_content">
                <div id='bar_container' class="bar_container">
                    <div class='bar mint' data-percent='70' data-skill='历史'></div>
                    <div class='bar red' data-percent='50' data-skill='网络应用'></div>
                    <div class='bar lila' data-percent='50' data-skill='PS'></div>
                    <div class='bar orange' data-percent='50' data-skill='Windows程序设计'></div>
                    <div class='bar gray' data-percent='30' data-skill='C语音'></div>
                    <div class="bar blue" data-percent='50' data-skill='人生'></div>
                    <div class="bar green" data-percent='60' data-skill='情感'></div>
                </div>
                <div id="box02_text">
                    <h1>About Skill</h1>
                    <div class="overline"></div>
                    <p>小学时初看《聪明的一休》</p>
                    <p>四年级时解除到了计算机</p>
                    <p>2016开始了正式学习</p>
                    <p>感觉到了计算机世界的神奇</p>
                    <p>由于对动漫和游戏的喜爱</p>
                    <p>大学读的计算机专业</p>
                    <p>想要了解学习动漫和游戏制作</p>
                    <p>将来成为一名工程师</p>
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="arrow_div">
                <img class="arrow_img" src="arrowhead.png">
            </div>
            
        </div>
        
        <div class="box">
            <img class="box_bg" src="114.jpg">
            
            <div class="box_content box03_content">
                <ul id="timeUl" class="timeUl">
                    <li>
                        <div>
                            <h1>2012-Now</h1>
                            <p>四川华新职业学院</p>
                            <p>专业：计算机应用技术</p>
                            <p>性别：男 属性：宅</p>
                            <p>最喜欢的科目是LOL<p>
                            <p>现在正在为前途而担心</p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <h1>2015.7-2015.8</h1>
                            <p>不怎么会说话</p>
                            <p>上学时不太认真听课</p>
                            <p>没学到什么东西</p>
                           <p>前途多艰</p>
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>2016.3-2016.4</h1>
                            <p>手机控</p>
                            <p>不能自已</p>
                            
                            <p>前途多艰</p>
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>Future</h1>
                            
                            <p>...</p>
                        </div>
                    </li>
                </ul>
                 <div class="left_div" id="left_div">
                     <img class="left_arrow" src="arrowleft.png">
                 </div>
                 <div class="right_div" id="right_div">
                      <img class="right_arrow" src="arrowright.png">
                 </div>
            </div>
            
             <div class="arrow_div">
                <img class="arrow_img" src="arrowhead.png">
            </div>
        </div>
        
        
        <div class="box">
            
            <img class="box_bg" src="112.jpg">
            <div class="box_content box04_content">
                <h1 class="box04_title">Something Of Hobby</h1>
                <ul class="hobby_content">
                    <li class="hobby_01">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_01"></div>
                            <div class="hobby_img">
                                <img src="118.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>游戏</h1>
                                <h2>LOL&CF</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>游戏/<a>LOL&CF</a></h1>
                            </div>
                            <p class="about_p">
                                从小时候就特别喜爱那种热血刺激的感觉，这几乎是每个男生都喜爱的
                                喜欢LOL那种团队协作取得胜利的感觉，喜欢CF那种射击时热血澎湃的感觉
                            </p>
                            <p>
                                热爱游戏，热爱生活
                                </a>
                            </p>
                        </div>
                    </li>
                    <li class="hobby_02">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_02"></div>
                            <div class="hobby_img">
                                <img src="116.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>ACG</h1>
                                <h2>动漫&视频&lol</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>ACG/<a>动漫&视频&lol</a></h1>
                            </div>
                            <p class="about_p">
                                入宅作《命运长夜》,喜欢那种不同于电影般情感体现，更加具有表现性
                                喜欢宫崎骏的动漫风格,喜欢热血情感的动漫.是个典型的萝莉控重度患者.
                            </p>
                            <p>
                                动漫对我而言是和名著一样的文化,它有着最具感染力的抒情方式,将来希望自己工作在二次元的领域.
                            </p>
                        </div>
                    </li>
                    <li class="hobby_03">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_03"></div>
                            <div class="hobby_img">
                                <img src="115.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>情感</h1>
                                <h2>孤独&忧伤</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>情感/<a>孤独&忧伤</a></h1>
                            </div>
                            <p class="about_p">
                                和大多数人宅男一样曾经也可以宅在家里半月不出门，兴趣来了忘记吃饭
                                喜欢看小说，各种各样的小说，有着丰富的情感体悟.
                            </p>
                            <p>
                                此外也写过小说,就是毅力不够，不能坚持到底.
                            </p>
                        </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
             <div class="arrow_div">
                <img class="arrow_img" src="arrowhead.png">
            </div>
        </div>
        
        <foot id="foot" class="foot">
            <h1 class="foot_title">Contact With Me</h1>
            <div class="foot_info_main">
                <ul>
                    <li class="github_items">
                        <a  target="_blank">GitHub</a>
                    </li>
                    <li class="google_items">
                        <a target="_blank">Google+</a>
                    
                    </li>
                    <li class="twitter_items">
                        <a target="_blank">Twitter</a>
                    
                    </li>
                    <li class="facebook_items">
                        <a target="_blank">FaceBook</a>
                    
                    </li>
                    <li class="weibo_items">
                        <a target="_blank">微博</a>
                    
                    </li>
                    <li class="zhihu_items">
                        <a  target="_blank">知乎</a>
                    
                     </li>
                     <li class="blog_items">
                        <a  target="_blank">博客</a>
                    
                     </li>
                     <li class="email_items">
                        <a href="mailto:min@coolecho.net" target="_blank">邮箱</a>
                    </li>
                    <div class="clear"></div>
                </ul>
                <div class="qrcode_div">
                    <span class="weixin">
                        <a class="weixin_icon"></a>
                        <img class="weixin_img" src="weixin_qr.png">
                    </span>
                    <span class="dingding">
                        <a class="dingding_icon"></a>
                        <img class="dingding_img" src="dingding_qr.png">
                    </span>
                    <span class="qq">
                        <a class="qq_icon"></a>
                        <img class="qq_img" src="qq_qr.jpg">
                    </span>
                </div>
            </div>
            <div class="foot_power">
                <h3>(c)2016 Pwoerd 
                    <a title="Night" target="_blank"> Night's</a>
                    <a  title="IceEnd">盗天明月</a>
                    <a  title="beian" target="_blank">川ICP备14039906号-1</a>
                </h3>
            </div>
        </foot>
    </div>
    <script type="text/javascript" src="main.js"></script>
</body>
    
</html>

 